<div class="col-md-12 column">
    <div class="modal fade" role="dialog" aria-hidden="true" data-backdrop="static" [ngClass]="{'in': showModal}" [ngStyle]="{'display': showModal ? 'block' : 'none' }">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" (click)="cancelBox()" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">
                        上传图片
                    </h4>
                </div>
                <div class="modal-body">
                    <div>
                        <!--调用裁剪组件-->
                        <app-my-cropper #cropper [newImageUrl]="imageUrl" [aspectRatio]="aspectRatio" (okButton)="onCrop($event)">
                            <img id="cropper" [attr.src]="imageUrl" alt="" >
                        </app-my-cropper>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default file" data-dismiss="modal">选择文件
                        <input type="file" (change)="modifyAvatar($event)" accept="image/png, image/jpeg, image/jpg"/>
                    </a>
                    <button type="button" (click)="cropper.cropImage()" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div *ngIf="showModal" class="modal-backdrop in"></div>